<template>
	<view>
		<view class="fg-box">
			<view class="fg-title">
				找回密码
			</view>
			<view class="fg-input">
				<input class="zh-input" type="text" name="phone" placeholder="请输入手机账号" v-model="phone"
					style="padding-left: 20rpx;color: #2B2B2B;" />
			</view>
			<view class="fg-btn">
				<button style="height: 96rpx;line-height: 96rpx;background: rgba(15, 83, 172, 1);font-size: 34rpx;"
					:disabled='disabled' @click="next">下一步</button>
			</view>




		</view>
		<view style="height: 84rpx;"></view>
		<view class="tigs">
			<view>若您还未绑定手机号，可联系我们重置密码，</view>
			<view class="tel">联系电话：<span style="color:#0F53AC" @click="freeTell">13439494660</span></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				//按钮
				disabled: false,
			};
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			freeTell() {
				wx.makePhoneCall({
					phoneNumber: '134-3949-4660', //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			//下一步
			next() {
				this.disabled = true
				//判断是否填写了手机号以及手机号是否正确
				const phone = this.phone
				const config = this.isPhone(phone)
				if (phone && config) {
					const params = {
						userAccount: phone
					}
					//这里就要显示输入验证码页面了（发送验证码）
					uni.$u.http.post(`/base/mobile/userInfo/sendSmsCode`, params).then(res => {
						if (res.code === 0) {
							//验证码发送成功页面改变
							this.disabled = false
							//跳转到验证码页面
							uni.navigateTo({
								url: '/pages/subPackagesD/login/validation?phone=' + this.phone
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							this.disabled = false
						}
					})

				} else {
					uni.showToast({
						title: '请填写合法的手机号码',
						icon: 'none'
					});
					this.disabled = false
				}
			},
			//验证手机格式
			isPhone(phone) {
				let config = false
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (!reg_tel.test(phone)) {
					config = false
				} else {
					config = true
				}
				return config
			},
		}
	}
</script>

<style lang="scss">
	.fg-box {
		padding: 28rpx;
	}

	.fg-title {
		font-weight: 500;
		color: #2B2B2B;
		font-size: 40rpx;
		margin-bottom: 40rpx;
	}

	.zh-input {
		height: 96rpx;
		line-height: 96rpx;
		background: rgba(242, 242, 242, 1);
		font-size: 28rpx;
		border-radius: 6px;
		margin-bottom: 60rpx;
	}

	.fg-btn {
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 6px;

		button {
			color: #fff;
			background: #0F53AC;
		}
	}

	.tigs {
		position: fixed;
		bottom: 48rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: center;
		width: 100%;
	}
</style>
